<template>
	<view class="container">
		<!-- <view class="left-bottom-sign"></view> -->
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<!-- <view class="right-top-sign"></view> -->
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<!-- <view class="left-top-sign">CCNBYSHOP</view> -->
			<view class="welcome">
				<image src="../../../static/login/login-logo.png" style="width: 160rpx; height: 160rpx"></image>
				<view class="" style="color: #111111;font-size: 36rpx">
					OJ原聚酒小二
				</view>
			</view>

			<view class="input-content">
				<!-- <view class="input-item">
					<text class="tit">用户名</text>
					<input type="text" v-model="form.userName" placeholder="请输入用户名" @input="inputChange" />
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input type="mobile" v-model="form.password" placeholder="密码长度要大于6位数"
						placeholder-class="input-empty" maxlength="20" password @input="inputChange" />
				</view>
				<view class="input-item">
					<text class="tit">重复密码</text>
					<input type="mobile" v-model="form.rePassword" placeholder="重复密码" placeholder-class="input-empty"
						maxlength="20" password data-key="rePassword" @input="inputChange" />
				</view> -->
				<view class="input-item">
					<!-- <text class="tit">手机号码</text> -->
					<input type="number" v-model="form.phoneNumber" placeholder="请输入手机号码" maxlength="11"
						data-key="mobileNo" @input="inputChange" />
				</view>
				<view class="input-item">
					<!-- <view style="display: flex;align-items: center;"> -->
						<!-- <view style="flex: 1;"> -->
							<!-- <text class="tit">验证码</text> -->
							<input type="number" v-model="form.code" placeholder="验证码" placeholder-class="input-empty"
								maxlength="20" data-key="mobile" @input="inputChange" />
						<!-- </view> -->
						<view class="mobileno-input-right">
							<a class="sendCodeBtn" @click="sendCode" v-if="verification">发送验证码</a>
							<a class="sendCodeBtn" v-if="!verification">{{ timer }} 秒后重新获取</a>
						</view>
					<!-- </view> -->
				</view>
			</view>
			<!-- <view v-show="false" style="display: flex;justify-content: center;align-content: center;margin: 10rpx 140rpx;">
				<view style="text-align: center;flex: 1;" @click="wxRegister">
					<view style="margin-bottom: 10rpx;">
						<u-icon name="weixin-circle-fill" size="95" color="#108040"></u-icon>
					</view>
					<view>微信授权</view>
				</view>
			</view> -->


			<button style="background: linear-gradient(135deg, #FFE5B2 0%, #C67A40 100%);" class="confirm-btn" @click="toRegisterByPassword"
				:disabled="registering">注册</button>
		</view>
<!-- 		<view  style="margin: 20rpx auto; width: 630upx;">
			<u-button   shape="circle" open-type="getPhoneNumber" @getphonenumber="phoneRegister" >微信手机号注册</u-button>
		</view> -->
		
		<view class="forget-section">
			已有账号?
			<text @click="navBack">马上登录</text>
		</view>
<!-- 		<view style="position: absolute;bottom: 30rpx;width: 100%;text-align: center;">
			点击注册，即表示同意<text style="color: #CA8248;">《用户协议》</text>和<text style="color: #CA8248;">《隐私政策》</text>
		</view> -->
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				author: false, // 微信授权
				submitting: false,
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: 60, // 定义初始时间为60s
				tips: '',
				seconds: 10,
				code: '',
				openId: '',
				mobileNo: '',
				password: '',
				rePassword: '',
				registering: false,
				supervisorId: '',
				groupUuid: '', //会员注册专用商品组
				wechatUserInfo: {},
				to: '',
				suscribeMsgList: [],
				form: {
					userName: '',
					password: '',
					phoneNumber: '',
					rePassword: '',
					code: ''
				}
			}
		},
		onLoad(options) {
			
			this.form.codeKey = uni.getStorageSync("codeKey")
		},
		
		computed: {
			...mapState(['applicationConfig','session_key','openid','token'])
		},
		methods: {
			...mapMutations(['login']),
			wxRegister(){
				const that = this
				uni.getUserProfile({
					desc: "获取你的昵称、头像、地区及性别",
					success: (res) => {
						// console.log(res);
						this.$api.request.addOpenid({
							encryptedData: res.encryptedData,
							iv: res.iv,
							sessionKey: this.session_key,
							wechatId: this.openid,
							sourceType:"APP"
						},res=>{
							// this.$api.msg(res.data)
							if(res.code==200){
								this.$api.request.getWxUser({
									wechatId: this.openid
								}, res => {
									if (res.code == 200&&res.data!=404) {
										this.$api.msg("微信授权成功！")
										uni.setStorageSync('userInfo', res.data)
										this.$store.commit("setToken", uni.getStorageSync(
											'userToken'))
										this.$store.commit("setToken", res.data.tokenValue)
										// 已授权
										this.author = true
										this.$store.commit("login", res.data);
										// setTimeout(res=>{
										// 	uni.switchTab({
										// 		url:"/pages/sys/home/index"
										// 	})
										// },1000)
									}else{
										setTimeout(function() {
											uni.showToast({
												title: res.message,
												icon: 'none'
											})
										},100)
									}
								})
							}else if(res.code == 205){
								setTimeout(function() {
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
									setTimeout(() => {
										uni.hideLoading()
									})
								},100)
							}
						})
						
					}
				})
			
			},
			phoneRegister(){
				
			},
			isWexinBrowser() {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					return true;
				} else {
					return false;
				}
			},
			getOpenIdByCode(code) {
				let that = this;
				let searchOptions = {
					code: code
				};
				that.$api.request.getOpenIdByCode4OfficialAccount(searchOptions, res => {
					if (res.body.status.statusCode === '0') {
						var data = res.body.data;
						that.openId = data.openId;
						uni.setStorageSync("openId", that.openId);
					} else {
						that.$api.msg(res.body.status.errorDesc);
					}
				});
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},
			getuserinfo(e) {
				let that = this;
			},
			loginRedirect() {
				var that = this;
				if (that.to) {
					uni.navigateTo({
						url: that.to
					})
				} else {
					uni.switchTab({
						url: '/pages/sys/home/index'
					})
				}
			},
			//查询订阅消息
			inquirySuscribeMsg() {
				this.$api.request.wxSuscribeMsg({}, res => {
					if (res.body.status.statusCode === '0') {
						this.suscribeMsgList = res.body.data.suscribeMsgList;
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			populateWechatUserInfo(requestData) {
				requestData.code = this.wechatUserInfo.code;
				requestData.name = this.wechatUserInfo.nickName;
				requestData.photoUrl = this.wechatUserInfo.avatarUrl;
				let sex = '未知';
				if (this.wechatUserInfo.gender === 1)
					sex = '男';
				else if (this.wechatUserInfo.gender === 2)
					sex = '女';
				requestData.sex = sex;
			},

			// 查询注册专用商品组
			inquiryProductGroupRegister() {
				this.$api.request.productGroupForRegister({}, res => {
					if (res.body.status.statusCode === '0' && res.body.data) {
						this.groupUuid = res.body.data.groupUuid;
					}
				});
			},
			async toRegisterByPassword() {
				const {
					userName,
					password,
					phoneNumber,
					rePassword,
					code,
				} = this.form;
				if (!this.$api.util.validateMobileNo(phoneNumber)) {
					this.$api.msg('手机号码格式错误');
				}else if (code=='') {
					this.$api.msg('验证码不能为空');
				}else if (this.author == false) {
					this.$api.msg('请点击微信授权');
					this.wxRegister()
				}
				else{
					this.form['wechatId'] = uni.getStorageSync("openId")
					this.$api.request.register(this.form,res=>{
						console.log(res);
						if(res.code ==200){
							setTimeout(() => {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
								setTimeout(res=>{
									uni.navigateTo({
										url:'/pages/sys/common/login'
									})
								},1000)
							}, 500)
							
						}else{
							this.$api.msg(res.message)
						}
						
					})
				}
				
				
				// this.$api.request.reg(requestData, regRes => {
				// 	if (regRes.body.status.statusCode === '0') {
				// 		//注册成功后立即登录, 获取userToken
				// 		this.$api.request.login({
				// 			verifyType: 'PASSWORD',
				// 			personalPhone: mobileNo,
				// 			personalPhoneCountryCode: '86',
				// 			password: password
				// 		}, loginRes => {
				// 			if (loginRes.body.status.statusCode === '0') {
				// 				var tokenId = loginRes.header.tokenId;
				// 				uni.setStorageSync('userToken', tokenId);
				// 				this.login(loginRes.body.data); //将用户信息保存起来
				// 				if (this.to) {
				// 					console.log(this.to);
				// 					uni.navigateTo({
				// 						url: this.to
				// 					})
				// 				} else if (this.groupUuid) {
				// 					uni.navigateTo({
				// 						url: '/pages/product/group?groupId=' + this.groupUuid
				// 					})
				// 				} else {
				// 					uni.switchTab({
				// 						url: '/pages/user/user'
				// 					})
				// 				}
				// 			} else {
				// 				this.$api.msg(loginRes.body.status.errorDesc);
				// 				this.registering = false;
				// 			}
				// 		});
				// 	} else {
				// 		this.$api.msg(regRes.body.status.errorDesc);
				// 		this.registering = false;
				// 	}
				// });
			},
			sendCode() {
				if (!this.$api.util.validateMobileNo(this.form.phoneNumber)) {
					this.$api.msg('手机号码格式错误');
					return
				}else{
					this.$api.request.getPhoneCode({
						phone: this.form.phoneNumber,
						temp: 'register'
					}, res => {
						// console.log(res);
						this.$u.toast(res.message);
						if (res.code == 200) {
							this.$api.msg('验证码已发送');
							this.form.codeKey = res.data.codeKey
							uni.setStorage({
								key: 'codeKey',
								data: res.data.codeKey
							})
							this.timer = 60
							this.verification = false
							this.countDown() // 执行验证码计时
						}
					})
									
									
				}
				// });
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer-- // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					})
					if (this.timer <= 0) {
						this.verification = true // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer)
					}
				}, 1000)
			},
		}
	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.container {
		padding-top: 75px;
		/* position: relative; */
		width: 100vw;
		height: 100%;
		overflow: hidden;
		background: #fff;
		background-image: url('../../../static/login/login-bg.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: top;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		/* background: #fff; */
		padding-bottom: 40upx;
		padding-top:160upx;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}

	.application-logo {
		text-align: center;

		image {
			width: 200upx;
			height: 200upx;
		}
	}

	.application-name {
		margin-top: 20upx;
		text-align: center;
		color: $font-color-base;
	}

	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: -16upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		text-align: center;
		/* top: -90upx; */
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
		margin-bottom: 120rpx;
	}

	.input-content {
		padding: 0 60upx;
	}

	.input-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 28rpx 48rpx;
		/* background: $page-color-light; */
		border-radius: 92rpx;
		margin-bottom: 48rpx;
		box-shadow:  0px 4rpx 20rpx 0px rgba(0,0,0,0.1);;
		
		&:last-child {
			margin-bottom: 0;
		}
		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}
	
		input {
			font-size: 30rpx;
			color: $font-color-dark;
			flex: 1;
			overflow: hidden;
		}
		.sendCodeBtn{
			font-size: 30rpx;
			color: #CA8248;
		}
	}

	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
		}
	}

	.forget-section {
		font-size: $font-sm+2upx;
		color: #444444;
		text-align: center;
		margin-top: 40upx;
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $font-sm+2upx;
		color: $font-color-base;
		text-align: center;

		text {
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}
</style>
